<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        button {
            cursor: pointer;
        }

        .show-box {
            width: 800px;
            height: 400px;
            border: red 5px dashed;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* overflow: hidden; */
        }

        /* .show-box:hover .item {
            transform: translateX(-100%);
        } */

        .item-list {
            /* width: 3200px; */
            /*  图片的宽度 * 图片的数量, 让图片横向排列  */
            height: 100%;
            background: #000;
            font-size: 0;
            transition: 0.3s;
        }

        .item {
            width: 800px;
            height: 100%;
            display: inline-block;
            /*  这一步是关键, 为的就是让图片横向排列  */
        }

        .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }




        /*           左右按钮    */
        .previous {
            width: 50px;
            height: 120px;
            border: none;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background: rgba(22, 22, 22, 0.3);
        }

        .next {
            width: 50px;
            height: 120px;
            border: none;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background: rgba(22, 22, 22, 0.3);
        }

        svg {
            font-size: 22px;
            font-weight: 800;
            color: seashell;
        }


        /* 小圆点  */
        .spot-list {
            background: rgba(0, 0, 0, .5);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0;
            /* 这一步是为了清除 li 的文字折叠/间隙  */
        }

        .spot {
            width: 22px;
            height: 22px;
            border-radius: 99px;
            background: greenyellow;
            display: inline-block;
            cursor: pointer;
            margin-left: 12px;
        }

        .active {
            background: red;
        }
    </style>



    <div class="show-box">
        <ul class="item-list">
            <li class="item">
                <img src="img/000.jpeg" alt="">
            </li>
            <li class="item">
                <img src="img/111.jpeg" alt="">
            </li>
            <li class="item">
                <img src="img/222.jpeg" alt="">
            </li>
            <li class="item">
                <img src="img/333.jpeg" alt="">
            </li>
        </ul>
        <!--   这里相当于   父盒子 show-box 绝对定位   -->
        <button onclick="Previous()" class="previous">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </button>
        <button onclick="Next()" class="next">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
            </svg>
        </button>
        <ul class="spot-list">
            <li class="spot active"></li>
            <li class="spot"></li>
            <li class="spot"></li>
            <li class="spot"></li>
        </ul>
    </div>







</body>
<script>
    var item_width = 800;
    var current_index = 0;
    console.log(current_index);
    var item_list = document.querySelector(".item-list")
    var show_box = document.querySelector(".show-box")
    var timer;
    console.log(item_list.style.width);
    var items = document.querySelectorAll(".item")

    // 鼠标放上去 停止/开始 轮播
    show_box.addEventListener('mouseover', function () {
        stopPlay()
    })
    show_box.addEventListener('mouseout', function () {
        autoPlay()
    })

    // 自动轮播
    function autoPlay(params) {
        timer = setInterval(function () {
            Next()
        }, 555)
    }
    function stopPlay() {
        clearInterval(timer)
    }
    // 设置宽度的大小
    function init_width() {
        item_list.style.width = item_width * items.length + "px";
    }

    // 核心功能:
    function move_pic() {
        if(current_index >= items.length){
            current_index = 0;
        }
        if(current_index < 0){
            current_index = items.length-1;
        }
        console.log(current_index);
        let move_width =  current_index * item_width ;
        //  transform: translateX(-100%);
        item_list.style.transform = "translateX(-" + move_width + "px)";
        let spots = document.querySelectorAll(".spot");
        for (let i = 0; i < spots.length; i++) {
            if (i == current_index ) {
                spots[i].classList.add("active");
            } else {
                spots[i].classList.remove("active");
            }
        }
    }


    function Next() {
        current_index++;
        move_pic(current_index);
    }
    function Previous() {
        current_index--;
        move_pic(current_index);
    }



    init_width()
    autoPlay()
    


    //  小圆点
    var spot_list = document.querySelector(".spot-list")
    spot_list.addEventListener("click", function (eee) {
        if (eee.target.classList.contains("spot")) {
            // 关键函数, 获取点击的是第几个元素
            let spots = document.querySelectorAll(".spot");
            let index = Array.prototype.indexOf.call(spots, eee.target)
            console.log(index);
            current_index = index;
            move_pic()
        }
    })




</script>
</html>